/**出口配置
 * webpack.config.js  暴露webpack需要额5大核心配置
 * 
 */
// 导入 node 内置的包(三方包语法相同)  path:
// 导入 node 内置模块 path 获取当前文件的绝对路径

const HtmlWebpackPlugin = require('html-webpack-plugin');

const MiniCssExtractPlugin = require('mini-css-extract-plugin')  //压缩css到独立文件

const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin')  //link标签的形式引入到页面

const path = require('path');



module.exports = {
    entry:{
        commonCSS:"./src/js/commonCSS.js",
        weui:"./src/lib/weui/weui.js",
        swiper:'./src/lib/swiper/swiper-bundle.js',
        httpJS:"./src/js/http.js",
        advertisement:"./src/js/advertisement.js",
        login:'./src/js/login.js',
        register:"./src/js/register.js",
        home:"./src/js/home.js",
        utils:'./src/utils/utils.js',
        course:"./src/js/course.js",
        mine:"./src/js/mine.js",
        info:"./src/js/info.js",
        conInfo:"./src/js/conInfo.js",
        play:"./src/js/play.js",
        yundong:"./src/js/yundong.js"
    },
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'js/[name].js',
        publicPath: "./"
    },
    module: {
        // 配置loader--规则：什么文件 用什么loader解释
        rules: [
            // 配置css文件打包得loader解释器
            {
                test: /.css$/,   //以.css结尾得文件名 都走下面的loader解释器解释
                // css-loader: 让webpack 可以认识 css代码，并完成解释，将解释完成的代码放到 main.js 
                // style-loader: 将 main.js里面的css代码，提取出来 放到 页面的 <head>--<style>（自动添加这个标签） 里面去
                use: [{
                    loader: MiniCssExtractPlugin.loader,
                    options: {
                        publicPath: '../'       //解决在css中引入的图片 的相对路径设置
                    }
                }, 'css-loader']
            },
            {
                test: /.less$/,
                use: [{
                    loader: MiniCssExtractPlugin.loader,
                    options: {
                        publicPath: '../'       //解决在css中引入的图片 的相对路径设置
                    }
                }, 'css-loader', "less-loader"]
            },
            {
                test: /.(jpg|png|gif|webp|jpeg)$/,
                // use:[]//use   
                loader: 'url-loader',  //只需要一个loader 时 loader:''
                //针对图片打包 设置打包的属性
                options: {
                    //[ext] 原来是什么后缀 打包完成之后还是什么后缀--重新命令
                    name: '[hash:16].[ext]',   //hash 摘要算法-加密（生成随机当前项目中不重复32位的字符串）
                    limit: 30 * 1024,  // 如果图片小于30kB 进行压缩（把图片压缩  base64位代码）
                    esModule: false,  //模块化 ：commonJS   Es6模块化禁用
                    outputPath: "img"
                }
            },
            {
                test: /.html$/,
                loader: "html-loader",
            },
            {
                test: /.(svg|eot|woff|woff2|ttf)$/,
                loader: "file-loader",
                options: {
                    outputPath: 'fonts' //文件都放到 fonts文件中
                }
            }


        ]

    },

    plugins: [
        new HtmlWebpackPlugin({
            //html路径
            template: "./src/advertisement.html",
            //生成之后的名字
            filename: "advertisement.html",
            chunks:["advertisement","commonCSS","httpJS"]
        }),
        new HtmlWebpackPlugin({
            //html路径
            template: "./src/login.html",
            //生成之后的名字
            filename: "login.html",
            chunks:["login","commonCSS","httpJS"]
        }),
        new HtmlWebpackPlugin({
            //html路径
            template: "./src/register.html",
            //生成之后的名字
            filename: "register.html",
            chunks:["register","commonCSS","httpJS"]
        }),
        new HtmlWebpackPlugin({
            //html路径
            template: "./src/conInfo.html",
            //生成之后的名字
            filename: "conInfo.html",
            chunks:["conInfo","commonCSS","httpJS"]
        }),
        new HtmlWebpackPlugin({
            //html路径
            template: "./src/play.html",
            //生成之后的名字
            filename: "play.html",
            chunks:["play","commonCSS","httpJS"]
        }),
        new HtmlWebpackPlugin({
            //html路径
            template: "./src/yundong.html",
            //生成之后的名字
            filename: "yundong.html",
            chunks:["yundong","commonCSS","httpJS"]
        }),
        new HtmlWebpackPlugin({
            //html路径
            template: "./src/home.html",
            //生成之后的名字
            filename: "home.html",
            chunks:["home","commonCSS","httpJS","swiper","utils"]
        }),
        new HtmlWebpackPlugin({
            //html路径
            template: "./src/info.html",
            //生成之后的名字
            filename: "info.html",
            chunks:["info","commonCSS","httpJS","weui"]
        }),
        new HtmlWebpackPlugin({
            //html路径
            template: "./src/course.html",
            //生成之后的名字
            filename: "course.html",
            chunks:["course","commonCSS","httpJS","swiper","utils"]
        }),
        new HtmlWebpackPlugin({
            //html路径
            template: "./src/mine.html",
            //生成之后的名字
            filename: "mine.html",
            chunks:["mine","commonCSS","httpJS","swiper","utils"]
        }),
        new MiniCssExtractPlugin({
            //生成css文件 放在哪里 叫什么名字 [name]:哪个js模块 引入的这个css  打包出来的css 名字就和js的名字一致
            filename: 'css/[name].css'
        }),
        new OptimizeCssAssetsWebpackPlugin(),
    ],
    mode: 'production',
    devServer: {
        contentBase: path.resolve(__dirname, 'dist'), // 启动服务器目录
        compress: true, // 启动gzip
        port: 8081,  // 端口   4000--9000   8080 80  8081 8082  协议://IP地址（域名）:端口号(80)
        open: true, // 自动打开服务：运行时 自动打开浏览器
        publicPath: '/', // 静态资源查找路径
        openPage: 'advertisement.html', // 运行项目时 直接打开的默认页面
      },
      target: 'web', // 运行的平台：目标是浏览器
}